<template>
	<view class="recycle-address-save-page">
		<div v-if="failure" class="addr-error-tip">回收宝地址库已升级，此地址已失效。重新编辑后才能继续使用。</div>
		<view class="address-cell-group">
			<view class="address-cell">
				<view class="cell-label">{{ recycleWay === '3' || recycleWay === '4' ? '上门地址' : '地址' }}</view>
				<view
					class="cell-body"
					@click="searchAddress"
				>
					<view
						v-if="searchAddrInfo.name"
						class="address-info"
					>
						<view class="address-landmark">{{ searchAddrInfo.name }}</view>
						<view class="address-detail">{{ searchAddrInfo.province }}{{ searchAddrInfo.city }}{{ searchAddrInfo.area }}{{ searchAddrInfo.address }}</view>
					</view>
					<view v-else class="address-placeholder">请选择地址区域</view>
				</view>
				<image class="icon-more" src="@/static/images/icon_gray_more.png"></image>
			</view>
			<view class="address-cell">
				<view class="cell-label">门牌号</view>
				<view class="cell-body">
					<input
						:value="addressInfo.house"
						data-key="house"
						placeholder="详细地址，例如：101室"
						placeholder-style="font-size: 28rpx;color: #cccccc;"
						class="field-input"
						@input="valueChange"
					/>
				</view>
			</view>
			<view class="address-cell">
				<view class="cell-label">联系人</view>
				<view class="cell-body">
					<input
						:value="addressInfo.userName"
						data-key="userName"
						maxlength="30"
						placeholder="请填写联系人姓名"
						placeholder-style="font-size: 28rpx;color: #cccccc;"
						class="field-input"
						@input="valueChange"
					/>
				</view>
			</view>
			<view class="address-cell">
				<view class="cell-label">联系方式</view>
				<view class="cell-body">
					<input
						type="tel"
						:value="addressInfo.tel"
						data-key="tel"
						maxlength="11"
						placeholder="请填写手机号码"
						placeholder-style="font-size: 28rpx;color: #cccccc;"
						class="field-input"
						@input="valueChange"
					/>
				</view>
			</view>
			<view class="address-cell">
				<view class="cell-label">设置为默认</view>
				<view class="cell-body right">
					<uv-switch
						v-model="isDefault"
						size="25"
						activeColor="#ffe100"
					/>
				</view>
			</view>
		</view>
		<view
			class="address-save-button"
			@click="saveAddress"
		>
			<text>保存并使用</text>
		</view>
	</view>
</template>

<script>
export default {
	data () {
		return {
			recycleWay: '',
			addrId: '',
			failure: false,
			isDefault: false,
			addressInfo: {
				house: '',
				userName: '',
				tel: ''
			},
			searchAddrInfo: {}
		}
	},
	methods: {
		async getAddressInfo () {
			const [res] = await this.$apis.getAddressDetail({
				addrId: this.addrId
			})
			if (res._errCode === '0') {
				const {
					userName,
					tel,
					houseNumber,
					provinceName,
					cityName,
					areaName,
					areaCode,
					landmark,
					longitude,
					latitude,
					isDefault,
					address
				} = res._data || {}
				this.addressInfo = {
					house: houseNumber,
					userName,
					tel
				}
				this.isDefault = isDefault === '1'
				if (!longitude || !latitude) {
					this.failure = true
					return
				}
				this.searchAddrInfo = {
					name: landmark,
					province: provinceName,
					city: cityName,
					area: areaName,
					areaCode,
					address,
					longitude,
					latitude
				}
			} else {
				uni.showToast({
					title: res._errStr || '获取地址信息失败',
					icon: 'none'
				})
			}
		},
		async saveAddress () {
			const { name, province, city, area, areaCode, address, longitude, latitude } = this.searchAddrInfo
			const { house, userName, tel, isDefaultAddr } = this.addressInfo
			if (!name || !province || !city || !area) {
				return uni.showToast({
					title: '地址区域不能为空',
					icon: 'none'
				})
			}
			if (!house.trim()) {
				return uni.showToast({
					title: '门牌号不能为空',
					icon: 'none'
				})
			}
			if (!userName.trim()) {
				return uni.showToast({
					title: '联系人不能为空',
					icon: 'none'
				})
			}
			if (!tel) {
				return uni.showToast({
					title: '手机号码不能为空',
					icon: 'none'
				})
			}
			if (!(/^1[3456789]\d{9}$/.test(tel))) {
				return uni.showToast({
					title: '手机号码格式不正确',
					icon: 'none'
				})
			}
			const params = {
				provinceName: province,
				cityName: city,
				areaName: area,
				areaCode,
				address,
				tel,
				longitude,
				latitude,
				houseNumber: house,
				userName,
				isDefault: String(Number(this.isDefault)),
				landmark: name
			}
			if (this.addrId) {
				params.addrId = this.addrId
			}
			const [res] = await this.$apis[params.addrId ? 'editAddressByLocation' : 'addAddressByLocation'](params)
			if (res._errCode === '0') {
				uni.showToast({
					title: '地址保存成功',
					icon: 'success',
					mask: true
				})
				setTimeout(() => {
					const eventChannel = this.getOpenerEventChannel()
					eventChannel.emit('saveAddressInfo', {
						data: {
							...params,
							addrId: params.addrId || res._data.addrIndex
						}
					})
					uni.navigateBack()
				}, 1000)
			}
		},
		searchAddress () {
			uni.navigateTo({
				url: `/pages/address/recycle-search/index?recycleWay=${this.recycleWay}`,
				events: {
					updateAddressInfo: (addrInfo) => {
						this.searchAddrInfo = addrInfo?.data || {}
					}
				}
			})
		},
		valueChange (e) {
			const key = e.currentTarget.dataset.key
			if (key) {
				this.addressInfo[key] = e.detail.value
			}
		}
	},
	onLoad (options) {
		this.recycleWay = options.recycleWay || ''
		this.addrId = options.addrId || ''
		if (this.addrId) {
			this.getAddressInfo()
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
